<template>
  <view class="feedback-bg">
    <!-- 顶部tab栏 -->
    <view class="tab-bar">
      <view v-for="(tab, idx) in tabs" :key="tab" :class="['tab-item', activeTab === tab.value ? 'active' : '']"
        @click="handleTab(tab)">
        {{ tab.label }}
      </view>
    </view>
    <!-- 反馈列表 -->
    <view v-for="(item, idx) in list" :key="item.id" class="record-card">
      <view class="record-header" >
        <view @click="toDetail(item)" >
          <view class="record-title">关于{{ item.violationCase?.violationCode }}的申诉</view>
          <view class="record-status">
            <text :class="[
              'dot',
              item.feedbackStatus == 0
                ? 'dot-orange'
                : item.feedbackStatus == 1
                ? 'dot-green'
                : 'dot-red'
            ]"></text>
            <text :class="[
              'status-text',
              item.feedbackStatus == '处理中'
                ? 'text-orange'
                : item.feedbackStatus == 1
                ? 'text-green'
                : 'text-red'
            ]">
              {{ item.feedbackStatus==0 ? '处理中' : item.feedbackStatus==1 ? '已通过' : '未通过' }}
            </text>
            <text class="record-date">提交于 {{ item.createTime }}</text>
          </view>
        </view>
        <view @click="toggle(idx)" >
          <u-icon :name="openIdx === idx ? 'arrow-up' : 'arrow-down'" color="#888" size="22"
            style="margin-left: 12rpx;" />
        </view>
      </view>
      <!-- 展开内容 -->
      <view v-if="openIdx === idx" class="record-detail">
        <!-- 处理中 -->
        <view v-if="item.feedbackStatus == 0">
          <view class="record-desc">
            {{item.feedbackContent}}
          </view>
          <view class="record-case">
            <view class="case-title">关联案例</view>
            <view class="case-box">
              <view>案例ID: {{ item.violationCase.violationCode }}</view>
            </view>
          </view>
          <view class="record-tip">预计3-5个工作日内完成审核</view>
        </view>
        <!-- 已通过 -->
        <view v-else-if="item.feedbackStatus == 1">
          <view class="record-desc">
            {{item.feedbackContent}}
          </view>
          <view class="record-case">
            <view class="case-title">关联案例</view>
            <view class="case-box">
              <view>案例ID: {{item.violationCase.violationCode }}</view>
              <!-- <view>关于最新行业监管政策的解读分析</view> -->
            </view>
          </view>
          <view class="record-result record-result-green">
            {{item.processingResults}}
            <view class="result-time">处理时间: {{item.updateTime}}</view>
          </view>
        </view>
        <!-- 未通过 -->
        <view v-else>
          <view class="record-desc">
            {{item.feedbackContent}}
          </view>
          <view class="record-case">
            <view class="case-title">关联案例</view>
            <view class="case-box">
              <view>案例ID: {{ item.violationCase.violationCode}}</view>
              <!-- <view>新一代智能设备性能参数及应用场景介绍</view> -->
            </view>
          </view>
          <view class="record-result record-result-red">
            {{item.processingResults}}
            <view class="result-time">处理时间: {{item.updateTime}}</view>
          </view>
          <button class="retry-btn" @click="toFeedback"  >再次提交反馈</button>
        </view>
      </view>
    </view>
    <view v-if="list.length==0 " style="margin-top: 20rpx;" >
          <up-empty
              mode="data"
              text="暂无数据"
          >
          </up-empty>
      </view>
  </view>
</template>

<script setup>
import { ref, computed,onMounted } from 'vue'
import {getFeedbackList} from '@/api/index'
import {onReachBottom,onShow,onPullDownRefresh } from '@dcloudio/uni-app'
const tabs = [
  {label:'全部',value:''},
  {label:'处理中',value:0},
  {label:'已通过',value:1},
  {label:'未通过',value:2}
]
let params=ref({
  pageNum:1,
  feedbackStatus:''

})
let total=ref(0)
onShow(()=>{
  params.value.pageNum=1
  getFeedbackList(params.value).then(res=>{
    console.log(res);
    list.value =res.rows
    total.value=res.total
    
  })

})
onPullDownRefresh(()=>{
  params.value.pageNum=1
  getFeedbackList(params.value).then(res=>{
    console.log(res);
    list.value =res.rows
    uni.stopPullDownRefresh()
  })
})
const handleTab = (item) => {
  activeTab.value = item.value
  params.value.feedbackStatus=item.value
  getFeedbackList(params.value).then(res=>{
    console.log(res);
    list.value =res.rows
  })
}
onReachBottom(()=>{
  if(total.value>list.value.length){
    params.value.pageNum++
    getFeedbackList(params.value).then(res=>{
      console.log(res);
      
    }) 
  }
})
const toFeedback = () => {
  uni.navigateTo({ url: '/pages/blacklist/feedback' })
}
const activeTab = ref('')
const openIdx = ref(-1)

const list = ref([
  {
    id: 1,
    title: '关于违规案例C20240910003的申诉',
    status: '处理中',
    date: '2024-09-16 09:23',
    caseId: 'C20240910003'
  },
  {
    id: 2,
    title: '关于违规案例C20240705012的申诉',
    status: '已通过',
    date: '2024-07-06 15:47',
    caseId: 'C20240705012'
  },
  {
    id: 3,
    title: '关于违规案例C20240618005的申诉',
    status: '未通过',
    date: '2024-06-19 10:15',
    caseId: 'C20240618005'
  },
  {
    id: 4,
    title: '关于账号异常登录的反馈',
    status: '已通过',
    date: '2024-05-22 18:03',
    caseId: 'C20240522001'
  }
])



const toggle = idx => {
  openIdx.value = openIdx.value === idx ? -1 : idx
}
const toDetail = item => {
  uni.navigateTo({
    url: '/pages/mine/feedback_detail?id=' + item.id
  })
}
</script>

<style scoped>
.feedback-bg {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 40rpx;
}
.tab-bar {
  display: flex;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 8rpx;
}
.tab-item {
  flex: 1;
  text-align: center;
  font-size: 30rpx;
  color: #888;
  padding: 24rpx 0;
  font-weight: bold;
  border-bottom: 4rpx solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.tab-item.active {
  color: #3a7afe;
  border-bottom: 4rpx solid #3a7afe;
  background: #fff;
}
.record-card {
  background: #fff;
  border-radius: 18rpx;
  margin: 18rpx 18rpx 0 18rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(64,158,255,0.04);
  overflow: hidden;
}
.record-header {
  padding: 24rpx 24rpx 12rpx 24rpx;
  display: flex;
  justify-content: space-between;
  /* flex-direction: column; */
  cursor: pointer;
}
.record-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 8rpx;
}
.record-status {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  gap: 8rpx;
  margin-bottom: 2rpx;
}
.dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6rpx;
}
.dot-orange {
  background: #faad14;
}
.dot-green {
  background: #19be6b;
}
.dot-red {
  background: #fa5151;
}
.status-text {
  margin-right: 10rpx;
}
.text-orange {
  color: #faad14;
}
.text-green {
  color: #19be6b;
}
.text-red {
  color: #fa5151;
}
.record-date {
  color: #888;
  margin-left: 8rpx;
  font-size: 24rpx;
}
.record-detail {
  border-top: 1rpx solid #f0f0f0;
  padding: 18rpx 24rpx 24rpx 24rpx;
  background: #fff;
}
.record-desc {
  font-size: 28rpx;
  color: #444;
  margin-bottom: 18rpx;
  line-height: 1.7;
  background: #f7f8fa;
  border-radius: 12rpx;
  padding: 18rpx 20rpx;
}
.record-case {
  margin-bottom: 18rpx;
}
.case-title {
  font-size: 26rpx;
  color: #888;
  margin-bottom: 6rpx;
}
.case-box {
  background: #f7f8fa;
  border-radius: 12rpx;
  padding: 14rpx 18rpx;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 6rpx;
}
.case-link {
  color: #3a7afe;
  margin-top: 4rpx;
}
.record-tip {
  color: #888;
  font-size: 24rpx;
  margin-top: 8rpx;
}
.record-result {
  border-radius: 12rpx;
  padding: 18rpx 20rpx;
  font-size: 26rpx;
  margin-bottom: 12rpx;
  margin-top: 8rpx;
}
.record-result-green {
  background: #e6f9ea;
  color: #19be6b;
}
.record-result-red {
  background: #ffeaea;
  color: #fa5151;
}
.result-time {
  color: #888;
  font-size: 24rpx;
  margin-top: 8rpx;
}
.retry-btn {
  width: 100%;
  background: #3a7afe;
  color: #fff;
  border: none;
  border-radius: 12rpx;
  font-size: 28rpx;
  padding: 18rpx 0;
  font-weight: bold;
  margin-top: 18rpx;
}
</style>